import { useState } from 'react'
import { Col, Row, Flex, Button, Form, Input } from 'antd'
import { getVerificationImage, login } from '@/api/user'
import { useNavigate } from 'react-router-dom'
import { useTranslation } from 'react-i18next'
import { useMount } from 'react-use'
import Toast from '@/utils/Toast'
import './index.scss'

const Login = () => {
  const navigate = useNavigate()
  const { t } = useTranslation()
  const [Verification, setVerification] = useState({
    verificationUuid: '',
    verificationImage: ''
  }) 
  const initForm = {
    userName: '',
    password: '',
    verificationCode: ''
  }
  const getCode = async () =>{
    const res = await getVerificationImage()
    setVerification(res?.data ?? {})
  }
  const onFinish = async (values) => {
    const res = await login({...values, verificationUuid: Verification.verificationUuid}).finally(() => getCode())
    const token = res?.data?.token ?? ''
    window.storage.set('token', token)
    Toast.success(t('login.loginSucess'))
    navigate('/conf')
  }
  useMount(() => getCode())
  return <Row className='web-login'>
    <Col span={15}>
      <div className='web-login-left'>
        <img src='/assets/Login/car.png' alt="car" />
      </div>
    </Col>
    <Col span={9}>
      <Flex align='center' className='web-login-right'>
        <div className='web-login-right-cont'>
          <h1>{t('app')}</h1>
          <Form
            name="normal_login"
            className="web-login-right-cont-form"
            initialValues={initForm}
            onFinish={onFinish}
            size='large'
            layout="vertical"
          >
            <Form.Item
              name="userName"
              label={t('login.userName')}
              rules={[
                {
                  required: true,
                  message: t('inputUsername')
                }
              ]}
            >
              <Input className='form-input' placeholder={t('inputUsername')} />
            </Form.Item>
            <Form.Item
              name="password"
              label={t('login.password')}
              rules={[
                {
                  required: true,
                  message: t('inputPassword')
                }
              ]}
              >
              <Input.Password
                className='form-input'
                placeholder={t('inputPassword')}
                autoComplete="false"
              />
            </Form.Item>
            <Form.Item
              name="verificationCode"
              label={t('login.code')}
              rules={[
                {
                  required: true,
                  message: t('inputCode')
                }
              ]}
              >
              <Flex>
                <Input
                  className='form-input'
                  placeholder={t('inputCode')}
                />
                <img onClick={getCode} className='code' src={`data:image/png;base64,${Verification.verificationImage}`} alt="code" />
              </Flex>
            </Form.Item>
            <Form.Item>
              <Button className='login-form-button' block size='large' type="primary" htmlType="submit">
                {t('login.login')}
              </Button>
            </Form.Item>
          </Form>
        </div>
      </Flex>
    </Col>
  </Row>
}
export default Login